<script type="text/javascript">
(function(){
	<%
		local para = {
			device = {info = {}},
			network = {wan_status = {}, lan = {}},
			wireless = {wifi_2g_status = {}, wifi_5g_status = {}},
			wisp = {config = {}}
		}
		local data = tpl_get_data(para, true)
mdate = luci.util.exec("date +'%Y/%m/%d %H:%M'") 
    cpuv = luci.util.exec("top -n 1|grep Load|grep -v grep|awk '{print $3','$4','$5}'")
    cpuv2= luci.util.exec("top -n 1|grep idle|grep -v grep|awk '{print $2}' ")
    cpuv=cpuv2 .. " (负载：" ..cpuv ..")"
    memv = luci.util.exec("free |grep '-'|awk '{printf $4}' ")
    memv2=math.ceil(100-tonumber(memv)*100/121388)
    memv=tostring(memv2) .. "% (空闲：" ..  memv .. "K)"
	-%>
	var sysStatus = <%=data%>;
	var currentState = stateman.current.name;

	function capacityTrans(capacity){
		var KB = 1000;
		var MB = KB * 1000;
		var GB = MB * 1000;

		capacity = parseInt(capacity, 10);
		if (capacity >= GB){
			capacity = (capacity/GB).toFixed(2) + "GB";
		}else if (capacity >= MB){
			capacity = (capacity/MB).toFixed(2) + "MB";
		}else if (capacity >= KB){
			capacity = (capacity/KB).toFixed(2) + "KB";
		}else{
			capacity = capacity.toFixed(2) + "B";
		}

		return capacity.toString();
	};

	function refreshStatus(){
		var data = {
			device:{"info":null},
			network:{"wan_status":null, "lan":null},
			wireless:{"wifi_2g_status":null, "wifi_5g_status":null},
			wisp:{"config":null}
		};

		apiGet(data, function(result){
			if (currentState != stateman.current.name){
				return ;
			}
			initPage(result);

			$.setTimeout(refreshStatus, 2000);
		});
	}
        $("#rebootbutton").click(function(){
              showConfirm(label.routerReboot, function(choose){
				if (choose){
					$.sendAjax('/system/reboot', null, function(){
						showProgressBar(label.rebootEquipment, label.rebooting, ROUTER.time.reboot, function(){
							window.location.reload();
						});

						$.setTimeout(function(){
							// 检测LAN是否可以连接DUT
							lanDetecting(function(){
								window.location.reload();
							});
						}, ROUTER.time.detectDelay);
					});
				}
			});

              
        })
	function initPage(result){
		var errNo = result[ERR_CODE];
		if (E_NONE == errNo){
			ret = result[K_MODULE];
		}else{
			console.log(result);
			return;
		}

		// 系统信息
		var sys = ret.device.info;
			
		//$("#Systime").text("<%=date%>");
		$("#Uptime").text(timeTrans(sys.uptime));
		$("#Product").text(sys.model);
		$("#Sw").text(sys.sw_ver);
		$("#Hw").text(sys.hw_ver);

		// 网络状态-WAN
		var wan = ret.network.wan_status;
		var wispStatus = ret.wisp.config;
		var proto = "";
		if ("1" == wispStatus.enable){
			proto = label.wisp + "-";
		}

		switch(wan.protocol){
		case "dhcp":
			proto += label.wanDHCP;
			break;
		case "pppoe":
			proto += label.wanPPPoE;
			break;
		case "static":
			proto += label.wanStatic;
			break;
		default:
			proto += wan.protocol;
			break;
		}

		$("#WanProto").text(proto);
		$("#WanIp").text(wan.ip);
		$("#WanNetmask").text(wan.netmask);
		$("#WanGateway").text(wan.gateway);
		$("#WanDns").text(wan.dns_pri + "," + wan.dns_sec);
		$("#WanMac").text(wan.mac);

		// 网络状态-LAN
		var lan = ret.network.lan;
		$("#LanIp").text(lan.ip);
		$("#LanNetmask").text(lan.netmask);
		$("#LanMac").text(lan.mac);

		// 无线状态-2.4G
		var wifi = ret.wireless.wifi_2g_status;

		if (1 == wifi.enable){
			$("#WlanSwitch").text(label.wifiOpened);
		}else{
			$("#WlanSwitch").text(label.wifiClosed);
		}

		$("#WlanSsid").text(wifi.ssid);

		var encryptMode;
		switch(wifi.safe_mode){
		case "0":
			encryptMode = label.uncrypt;
			break;
		case "1":
			encryptMode = "WPA-PSK/WPA2-PSK";
			break;
		default:
			encryptMode = wifi.safe_mode;
		}
		$("#EncryptType").text(encryptMode);

		var wifiMode;
		switch(parseInt(wifi.mode)){
		case 0:
			wifiMode = label.wifiBmode;
			break;
		case 1:
			wifiMode = label.wifiGmode;
			break;
		case 2:
			wifiMode = label.wifiNmode;
			break;
		default:
			wifiMode = wifi.mode;
		}
		$("#WifiMode").text(wifiMode);

		$("#Channel").text(wifi.channel);
		$("#wifiMac").text(wifi.mac);

		// 无线状态-5G
		var wifi5g = ret.wireless.wifi_5g_status;
		if (1 == wifi5g.enable){
			$("#Wlan5Switch").text(label.wifiOpened);
		}else{
			$("#Wlan5Switch").text(label.wifiClosed);
		}

		$("#Wlan5Ssid").text(wifi5g.ssid);

		var encryptMode;
		switch(wifi5g.safe_mode){
		case "0":
			encryptMode = label.uncrypt;
			break;
		case "1":
			encryptMode = "WPA-PSK/WPA2-PSK";
			break;
		default:
			encryptMode = wifi5g.safe_mode;
		}
		$("#EncryptType5G").text(encryptMode);

		var wifiMode;
		switch(parseInt(wifi5g.mode)){
		case 0:
			wifiMode = label.wifiAmode;
			break;
		case 1:
			wifiMode = label.wifiCmode;
			break;
		default:
			wifiMode = wifi5g.mode;
		}
		$("#WifiMode5G").text(wifiMode);

		$("#Channel5G").text(wifi5g.channel);
		$("#wifi5Mac").text(wifi5g.mac);


	}

	initPage(sysStatus);
	$.setTimeout(refreshStatus, 2000);
})();
</script>
<style type="text/css">
	div.status-con{
		margin:0 50px;
	}
	ul.status-con{
		padding-left:200px;
		position:relative;
	}
	ul.bottom-line{
		border-bottom:1px solid #E8E8E8;
	}
	li.middle-con{
		display:inline-block;
		width:50%;
		vertical-align:top;
	}
	h2.status-title{
		position:absolute;
		left:90px;
		top:8px;
		text-align:left;
		font-size:15px;
		color:#9C9C9C;
	}
	h3.sub-title{
		font-size:14px;
		color:#4F5356;
		height:40px;
		line-height:40px;
		vertical-align:middle;
	}
	i.sub-title-icon{
		display:inline-block;
		color:#FFA14D;
		font-size:28px;
		vertical-align:middle;
		width:40px;
		text-align:center;
	}
	p.status-detail{
		font-size:14px;
		color:#4F5356;
		height:40px;
		line-height:40px;
		padding-left:40px;
		vertical-align:middle;
		text-align:left;
		overflow:hidden;
		text-overflow:ellipsis;
		white-space:nowrap;
	}
	.list-bg{
		background-color:#F8F8F8;
	}
	.ok-info{
		display:none;
	}
	/*1080p适配*/
	@media screen and (min-device-width:1920px){
		h2.status-title {
			font-size: 19px;
		}
		p.status-detail {
			font-size: 18px;
			height: 44px;
			line-height: 44px;
		}
		h3.sub-title {
			font-size: 18px;
			height: 44px;
			line-height: 44px;			
		}
		i.sub-title-icon {
			font-size: 30px;
		}
	}
</style>
<div class="help hidden">
	<ul class="help-content">
		<li class="help-head">
			<img class="app-icon" src="/luci-static/images/app-icon/router_status.png?_=20170809165512" />
			<span class="help-title">{%label.routerInfo%}</span>
		</li>
		<li class="summary">{%helpStr.systemInfoTip%}</li>
	</ul>
</div>
<div class="head-con">
	<img class="app-icon" src="/luci-static/images/app-icon/router_status.png?_=20170809165512" />
	<a href="javascript:history.go(-1);" class="head-btn-l">
		<i class="head-btn icon icon_back"></i>
		<span class="head-title">{%label.routerInfo%}</span>
	</a>
</div>
<div class="status-con below-head">
	<ul class="status-con bottom-line">
		<h2 class="status-title">{%label.systemInfo%}</h2>
		<li class="middle-con">
			<p class="status-detail list-bg">
				<label class="item-name">系统时间：</label>
				<span class="item-status" id="Systime"><%=mdate%></span>
			</p>
			<p class="status-detail ">
				<label class="item-name">{%label.runningTime%}{%label.colon%}</label>
				<span class="item-status" id="Uptime"></span>
			</p>
			<p class="status-detail list-bg">
				<label class="item-name">{%label.deviceModel%}{%label.colon%}</label>
				<span class="item-status" id="Product"></span>
&nbsp<span><input type="button" class="btn" id="rebootbutton" style="width:56px;margin-top: 1px;margin-bottom: 5px;height: 22px;line-height: 22px;" value="&nbsp重启"> 
			</p>
			<p class="status-detail ">
				<label class="item-name">CPU占用：</label>
				<span class="item-status" id="Systime"><%=cpuv%></span>
			</p>
		</li>
		<li class="middle-con right-con">
			<p class="status-detail list-bg">
				<label class="item-name">Jim's Mod：</label>
				<span class="item-status" id="MySw">V2.0</span>
			</p>
			<p class="status-detail">
				<label class="item-name">{%label.swVersion%}{%label.colon%}</label>
				<span class="item-status" id="Sw"></span>
			</p>
			<p class="status-detail list-bg">
				<label class="item-name">{%label.hwVersion%}{%label.colon%}</label>
				<span class="item-status" id="Hw"></span>
			</p>
			<p class="status-detail ">
				<label class="item-name">内存占用：</label>
				<span class="item-status" id="MySw"><%=memv%></span>
			</p>
		</li>
	</ul>
	<ul class="status-con bottom-line">
		<h2 class="status-title">{%label.ifaceStatus%}</h2>
		<li class="middle-con">
			<h3 class="sub-title list-bg"><i class="sub-title-icon icon_lan"></i>{%label.wanStatus%}</h2>
			<p class="status-detail">
				<label class="item-name">{%label.wanType%}{%label.colon%}</label>
				<span class="item-status" id="WanProto"></span>
			</p>
			<p class="status-detail list-bg">
				<label class="item-name">{%label.wanIpAddr%}{%label.colon%}</label>
				<span class="item-status" id="WanIp"></span>
			</p>
			<p class="status-detail">
				<label class="item-name">{%label.wanNetmask%}{%label.colon%}</label>
				<span class="item-status" id="WanNetmask"></span>
			</p>
			<p class="status-detail list-bg">
				<label class="item-name">{%label.wanGateway%}{%label.colon%}</label>
				<span class="item-status" id="WanGateway"></span>
			</p>
			<p class="status-detail">
				<label class="item-name">{%label.wanDns%}{%label.colon%}</label>
				<span class="item-status" id="WanDns"></span>
			</p>
			<p class="status-detail list-bg">
				<label class="item-name">{%label.wanMac%}{%label.colon%}</label>
				<span class="item-status" id="WanMac"></span>
			</p>
		</li>
		<li class="middle-con right-con">
			<h3 class="sub-title list-bg"><i class="sub-title-icon icon_lan"></i>{%label.lanStatus%}</h2>
			<p class="status-detail">
				<label class="item-name">{%label.lanIpAddr%}{%label.colon%}</label>
				<span class="item-status" id="LanIp"></span>
			</p>
			<p class="status-detail list-bg">
				<label class="item-name">{%label.lanNetmask%}{%label.colon%}</label>
				<span class="item-status" id="LanNetmask"></span>
			</p>
			<p class="status-detail">
				<label class="item-name">{%label.lanMac%}{%label.colon%}</label>
				<span class="item-status" id="LanMac"></span>
			</p>
			<p class="status-detail list-bg"></p>
			<p class="status-detail"></p>
			<p class="status-detail list-bg"></p>
		</li>
	</ul>
	<ul class="status-con bottom-line">
		<h2 class="status-title">{%label.wifiStatus%}</h2>
		<li class="middle-con">
			<h3 class="sub-title"><i class="sub-title-icon icon_wifi_signal_three"></i>{%label.wifi2GStatus%}</h2>
			<p class="status-detail list-bg">
				<label class="item-name">{%label.wifiStatus%}{%label.colon%}</label>
				<span class="item-status" id="WlanSwitch"></span>
			</p>
			<p class="status-detail">
				<label class="item-name">{%label.wifiSsid%}{%label.colon%}</label>
				<span class="item-status" id="WlanSsid"></span>
			</p>
			<p class="status-detail list-bg">
				<label class="item-name">{%label.encryptType%}{%label.colon%}</label>
				<span class="item-status" id="EncryptType"></span>
			</p>
			<p class="status-detail">
				<label class="item-name">{%label.wifiMode%}{%label.colon%}</label>
				<span class="item-status" id="WifiMode"></span>
			</p>
			<p class="status-detail list-bg">
				<label class="item-name">{%label.wifiChannel%}{%label.colon%}</label>
				<span class="item-status" id="Channel"></span>
			</p>
			<p class="status-detail">
				<label class="item-name">{%label.wifiMac%}{%label.colon%}</label>
				<span class="item-status" id="wifiMac"></span>
			</p>
		</li>
		<li class="middle-con right-con">
			<h3 class="sub-title"><i class="sub-title-icon icon_wifi_signal_three"></i>{%label.wifi5GStatus%}</h2>
			<p class="status-detail list-bg">
				<label class="item-name">{%label.wifiStatus%}{%label.colon%}</label>
				<span class="item-status" id="Wlan5Switch"></span>
			</p>
			<p class="status-detail">
				<label class="item-name">{%label.wifiSsid%}{%label.colon%}</label>
				<span class="item-status" id="Wlan5Ssid"></span>
			</p>
			<p class="status-detail list-bg">
				<label class="item-name">{%label.encryptType%}{%label.colon%}</label>
				<span class="item-status" id="EncryptType5G"></span>
			</p>
			<p class="status-detail">
				<label class="item-name">{%label.wifiMode%}{%label.colon%}</label>
				<span class="item-status" id="WifiMode5G"></span>
			</p>
			<p class="status-detail list-bg">
				<label class="item-name">{%label.wifiChannel%}{%label.colon%}</label>
				<span class="item-status" id="Channel5G"></span>
			</p>
			<p class="status-detail">
				<label class="item-name">{%label.wifiMac%}{%label.colon%}</label>
				<span class="item-status" id="wifi5Mac"></span>
			</p>
		</li>
	</ul>
</div>
